<template>
  <div class="pagecontent" id="familyInfo">
    <div class="contentDetail" v-if="!updateFlag">
      <el-form
        :model="familyData"
        status-icon
        ref="familyData"
        class="demo-ruleForm"
        label-position="top"
      >
        <el-row :gutter="150">
          <el-col :span="12" style="height:50px;">
            <h2 class="titleH">家庭信息</h2>
          </el-col>
          <el-col :span="12" align="right" style="height:50px;">
            <el-button v-if="userType == 1" type="primary" size="small" @click="updateFlag=true">修改</el-button>
          </el-col>
          <el-col :span="8">
            <el-form-item label="在读学生数" prop="inSchoolNum">
              <el-input
                size="small"
                disabled
                type="text"
                v-model="familyData.inSchoolNum"
                autocomplete="off"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="近亲或邻居联系人" prop="neighborName">
              <el-input
                size="small"
                disabled
                type="text"
                v-model="familyData.neighborName"
                autocomplete="off"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="关系" prop="relation">
              <el-input
                size="small"
                disabled
                type="text"
                v-model="familyData.relation"
                autocomplete="off"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="近亲或邻居地址" prop="neighborAddress">
              <el-input
                size="small"
                disabled
                type="text"
                v-model="familyData.neighborAddress"
                autocomplete="off"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="近亲或邻居联系电话" prop="neighborPhone">
              <el-input
                size="small"
                disabled
                type="text"
                v-model="familyData.neighborPhone"
                autocomplete="off"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="近亲或邻居所在地邮编" prop="neighPostcode">
              <el-input
                size="small"
                disabled
                type="text"
                v-model="familyData.neighPostcode"
                autocomplete="off"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="是否单亲" prop="isSingle">
              <el-input
                size="small"
                disabled
                type="text"
                v-model="familyData.isSingle"
                autocomplete="off"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="是否孤儿" prop="isOrphan">
              <el-input
                size="small"
                disabled
                type="text"
                v-model="familyData.isOrphan"
                autocomplete="off"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="是否残疾" prop="isDisability">
              <el-input
                size="small"
                disabled
                type="text"
                v-model="familyData.isDisability"
                autocomplete="off"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="是否烈士子女" prop="isMartyr">
              <el-input
                size="small"
                disabled
                type="text"
                v-model="familyData.isMartyr"
                autocomplete="off"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="是否五保户" prop="isRuralInfirm">
              <el-input
                size="small"
                disabled
                type="text"
                v-model="familyData.isRuralInfirm"
                autocomplete="off"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="是否父母丧失劳动能力" prop="isParentLostAbilityWork">
              <el-input
                size="small"
                disabled
                type="text"
                v-model="familyData.isParentLostAbilityWork"
                autocomplete="off"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="是否办理生源地贷款" prop="isSourcePlaceLoan">
              <el-input
                size="small"
                disabled
                type="text"
                v-model="familyData.isSourcePlaceLoan"
                autocomplete="off"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="是否在当地建立档案卡" prop="isFilingCard">
              <el-input
                size="small"
                disabled
                type="text"
                v-model="familyData.isFilingCard"
                autocomplete="off"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="是否家庭中有大病患者" prop="isFamilySeriousIllness">
              <el-input
                size="small"
                disabled
                type="text"
                v-model="familyData.isFamilySeriousIllness"
                autocomplete="off"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="是否残疾人子女" prop="isParentDisabled">
              <el-input
                size="small"
                disabled
                type="text"
                v-model="familyData.isParentDisabled"
                autocomplete="off"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="残疾类别" prop="disabledType">
              <el-input
                size="small"
                disabled
                type="text"
                v-model="familyData.disabledType"
                autocomplete="off"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="上次贫困状况" prop="lastPovertySituation">
              <el-input
                size="small"
                disabled
                type="text"
                v-model="familyData.lastPovertySituation"
                autocomplete="off"
              ></el-input>
            </el-form-item>
          </el-col>
          <!-- <el-col :span="8">
            <el-form-item label="原始状态" prop="initialType">
              <el-input size="small" disabled type="text" v-model="familyData.initialType" autocomplete="off"></el-input>
            </el-form-item>
          </el-col>-->
          <el-col :span="8">
            <el-form-item label="当前状态" prop="currentState">
              <el-input
                size="small"
                disabled
                type="text"
                v-model="familyData.currentState"
                autocomplete="off"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="是否低收入家庭" prop="isLowIncomeFamily">
              <el-input
                size="small"
                disabled
                type="text"
                v-model="familyData.isLowIncomeFamily"
                autocomplete="off"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="家庭月总收入" prop="monthIncomeFamily">
              <el-input
                size="small"
                disabled
                type="text"
                v-model="familyData.monthIncomeFamily"
                autocomplete="off"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="收入来源" prop="sourceIncome">
              <el-input
                size="small"
                disabled
                type="text"
                v-model="familyData.sourceIncome"
                autocomplete="off"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="赡养人口数" prop="supportNumber">
              <el-input
                size="small"
                disabled
                type="text"
                v-model="familyData.supportNumber"
                autocomplete="off"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="失业人数" prop="unemployment">
              <el-input
                size="small"
                disabled
                type="text"
                v-model="familyData.unemployment"
                autocomplete="off"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="家庭可提供月生活费" prop="monthlyCost">
              <el-input
                size="small"
                disabled
                type="text"
                v-model="familyData.monthlyCost"
                autocomplete="off"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="家庭负债情况" prop="familyLiabilities">
              <el-input
                size="small"
                disabled
                type="text"
                v-model="familyData.familyLiabilities"
                autocomplete="off"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="家庭负债原因" prop="familyLiabilitiesReason">
              <el-input
                size="small"
                disabled
                type="text"
                v-model="familyData.familyLiabilitiesReason"
                autocomplete="off"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="是否农村特困供养" prop="isRuralSpecialPovertySupport">
              <el-input
                size="small"
                disabled
                type="text"
                v-model="familyData.isRuralSpecialPovertySupport"
                autocomplete="off"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="家庭人均年收入" prop="familyYearIncome">
              <el-input
                size="small"
                disabled
                type="text"
                v-model="familyData.familyYearIncome"
                autocomplete="off"
                maxlength="50"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="家庭劳动人口数" prop="isPlanSchoolPlaceLoan">
              <el-input
                size="small"
                disabled
                type="text"
                v-model="familyData.isPlanSchoolPlaceLoan"
                autocomplete="off"
                maxlength="50"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="是否预计校园地助学贷款" prop="isRuralSpecialPovertySupport">
              <el-input
                size="small"
                disabled
                type="text"
                v-model="familyData.isRuralSpecialPovertySupport"
                autocomplete="off"
                maxlength="50"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="手机品牌" prop="phoneBrand">
              <el-input
                size="small"
                disabled
                type="text"
                v-model="familyData.phoneBrand"
                autocomplete="off"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="手机价格" prop="phonePrice">
              <el-input
                size="small"
                disabled
                type="text"
                v-model="familyData.phonePrice"
                autocomplete="off"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="电脑品牌" prop="computerBrand">
              <el-input
                size="small"
                disabled
                type="text"
                v-model="familyData.computerBrand"
                autocomplete="off"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="电脑价格" prop="computerPrice">
              <el-input
                size="small"
                disabled
                type="text"
                v-model="familyData.computerPrice"
                autocomplete="off"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="家庭情况说明" prop="familySituationStatement">
              <el-input
                size="small"
                disabled
                type="textarea"
                :rows="4"
                v-model="familyData.familySituationStatement"
                autocomplete="off"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="其他重大情况" prop="otherImportantSituation">
              <el-input
                size="small"
                disabled
                type="textarea"
                :rows="4"
                v-model="familyData.otherImportantSituation"
                autocomplete="off"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="家庭是否遭受突发意外事件" prop="accidentSituation">
              <el-radio-group v-model="familyData.isAccident" disabled>
                <el-radio label="是">是</el-radio>
                <el-radio label="否">否</el-radio>
              </el-radio-group>
              <el-input
                size="small"
                v-if="familyData.isAccident=='是'"
                :rows="4"
                disabled
                type="textarea"
                v-model="familyData.accidentSituation"
                autocomplete="off"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="近三年家庭是否遭受自然灾害" prop="naturalDisasterSituation">
              <el-radio-group v-model="familyData.isNaturalDisaster" disabled>
                <el-radio label="是">是</el-radio>
                <el-radio label="否">否</el-radio>
              </el-radio-group>
              <el-input
                size="small"
                v-if="familyData.isNaturalDisaster=='是'"
                :rows="4"
                disabled
                type="textarea"
                v-model="familyData.naturalDisasterSituation"
                autocomplete="off"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <el-row>
        <el-col :span="24">
          <h2 class="titleH">家庭成员信息</h2>
        </el-col>
        <el-col :span="24">
          <el-table :data="familyTableData" style="width: 100%">
            <el-table-column label="序号" width="50">
              <template slot-scope="scope">{{scope.$index+1}}</template>
            </el-table-column>
            <el-table-column prop="name" label="姓名"></el-table-column>
            <el-table-column prop="relation" label="关系"></el-table-column>
            <el-table-column prop="politicStatus" label="政治面貌"></el-table-column>
            <el-table-column prop="birthDate" label="出生日期"></el-table-column>
            <el-table-column prop="phone" label="联系电话"></el-table-column>
            <el-table-column prop="workCompany" label="学习/工作单位"></el-table-column>
            <!-- <el-table-column prop="job" label="工作"></el-table-column> -->
            <el-table-column prop="monthlyIncome" label="月收入"></el-table-column>
            <el-table-column prop="healthStatus" label="健康状况"></el-table-column>
          </el-table>
        </el-col>
      </el-row>
    </div>
    <!-- 学生修改家庭信息 -->
    <div class="contentDetail" id="studentUpdate" v-if="updateFlag">
      <xd-updateFamily
        :familyData="recordFamilyData"
        :familyTableData="familyTableData"
        @updateTableInfo="updateTableInfo"
        :userType="this.userType"
        @cancleUpdate="cancleUpdate"
      ></xd-updateFamily>
    </div>
  </div>
</template>

<script>
import { school as schoolService, student as studentService } from '@api/index'
import updateFamily from '@/pages/main/components/updateFamily'

export default {
  name: 'familyInfo',
  data () {
    return {
      updateFlag: false,
      // 家庭基本信息
      familyData: {},
      userType: this.$store.state.user.type,
      sn: this.$route.query.sn || this.$store.state.user.id,
      recordFamilyData: {},
      familyTableData: []
    }
  },
  components: {
    'xd-updateFamily': updateFamily
  },
  props: [],
  watch: {},
  mounted () {
    this.initPage()
  },
  methods: {
    initPage () {
      // 1：学生；3：学校用户,4：年级辅导员,5 ：学院用户：
      if (parseInt(this.userType) === 1) {
        this.studentFindFamilySeverice()
        this.studentFindFamilyMember()
      } else {
        // this.supportFamilySatatus()
        this.familySeverice()
        this.familyMember()
      }
    },
    filterIsOrNot (OBJ) {
      let params = {}
      let checkArr = [
        'isSingle',
        'isOrphan',
        'isDisability',
        'isMartyr',
        'isRuralInfirm',
        'isParentLostAbilityWork',
        'isSourcePlaceLoan',
        'isFilingCard',
        'isFamilySeriousIllness',
        'isLowIncomeFamily',
        'isAccident',
        'isNaturalDisaster',
        'isParentDisabled',
        'isRuralSpecialPovertySupport',
        'isRuralSpecialPovertySupport'
      ]
      if (OBJ) {
        Object.keys(OBJ).forEach(key => {
          if (checkArr.indexOf(key) !== -1) {
            if (OBJ[key] === 1) {
              params[key] = '是'
            } else if (OBJ[key] === 0) {
              params[key] = '否'
            } else {
              params[key] = OBJ[key]
            }
          } else {
            params[key] = OBJ[key]
          }
        })
      }
      return params
    },
    // ------------------家庭信息-------------
    familySeverice () {
      schoolService()
        ._findFamilyRelationsBySn(this.sn)
        .then(res => {
          if (res.status && res.data) {
            this.recordFamilyData = res.data
            this.familyData = Object.assign(
              {},
              this.filterIsOrNot(res.data)
            )
          }
        })
    },
    studentFindFamilySeverice () {
      studentService()
        ._findStudentFamilyRelationsBySn()
        .then(res => {
          if (res.status && res.data) {
            this.recordFamilyData = res.data
            this.familyData = Object.assign(
              {},
              this.filterIsOrNot(res.data)
            )
          }
        })
    },
    // -----------------------------家庭经济情况----------------------------
    supportFamilySatatus () {
      schoolService()
        ._getStudentSubsidizeInfo(this.sn)
        .then(res => {
          if (res.status && res.data) {
            this.familyData = Object.assign(
              {},
              this.filterIsOrNot(
                res.data.studentLocalSubsidizeInfo
              ),
              this.filterIsOrNot(res.data.studentSubsidizeInfoVo)
            )
          }
        })
    },
    // ------------家庭成员-------------------
    updateTableInfo () {
      if (parseInt(this.userType) === 1) {
        this.studentFindFamilyMember()
      } else {
        this.familyMember()
      }
    },
    familyMember () {
      schoolService()
        ._schoolFindStudentFamilMember(this.sn)
        .then(res => {
          this.familyTableData = []
          if (res.status && res.data) {
            res.data.forEach(item => {
              Object.assign(
                item,
                {
                  isUpdateFlag: false
                },
                {
                  birthDate: this.$moment(
                    item.birthDate
                  ).format('YYYY-MM-DD')
                }
              )
            })
            this.familyTableData.push(...res.data)
          }
        })
    },
    studentFindFamilyMember () {
      studentService()
        ._findStudentFamilMember()
        .then(res => {
          this.familyTableData = []
          if (res.status && res.data.length) {
            res.data.forEach(item => {
              Object.assign(
                item,
                {
                  isUpdateFlag: 0 // 用于后面区分修改、新增、不修改：0不修改；1修改；2新增
                },
                {
                  birthDate: this.$moment(
                    item.birthDate
                  ).format('YYYY-MM-DD')
                }
              )
            })
            this.familyTableData.push(...res.data)
          }
        })
    },
    cancleUpdate () {
      this.updateFlag = false
      this.initPage()
    }
  }
}
</script>
<style lang="less">
#familyInfo .el-form--label-top .el-form-item__label{
  padding:0;
}
</style>
<style lang="less" scoped>
.titleH{
  font-size: 16px;
  margin-top: 10px;
  margin-bottom: 10px;
}
</style>
